import 'package:eh_mobile/common/utils/extension.dart';
import 'package:eh_mobile/common/values/index.dart';
import 'package:eh_mobile/pages/main/homepage/model/home_device_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import '../../../../common/widgets/icon_text_button.dart';
import '../controller.dart';

// 设备分类
class DeviceCategoryView extends StatefulWidget {
  const DeviceCategoryView(this.index, {super.key});

  final int index;

  @override
  State<DeviceCategoryView> createState() => _DeviceCategoryViewState();
}

class _DeviceCategoryViewState extends State<DeviceCategoryView>
    with AutomaticKeepAliveClientMixin {
  late int index = widget.index;

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return _DeviceCategoryViewGetX(index);
  }
}

// 设备分类列表
class _DeviceCategoryViewGetX extends GetView<HomepageController> {
  const _DeviceCategoryViewGetX(this.index, {Key? key}) : super(key: key);
  final int index;

  @override
  Widget build(BuildContext context) {
    return controller.pageList.isNotEmpty
        ? _buildBottomGridView(context, controller.pageList[index])
        : Container();
  }

  // 底部控制区域
  Widget _buildBottomGridView(BuildContext context, List perPageList) {
    return GridView.builder(
      padding: const EdgeInsets.only(left: 6, right: 6, top: 8).r,
      scrollDirection: Axis.vertical,
      itemCount: perPageList.length,
      physics: const NeverScrollableScrollPhysics(),
      // 不滑动
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        // 主轴上Item长度
        mainAxisSpacing: 0,
        // 主轴item之间的间距
        crossAxisSpacing: 3.r,
        // 水平item之间的间距
        childAspectRatio: 0.5,
        //宽高比
        mainAxisExtent: 66.0.r,
      ),
      itemBuilder: (context, index) {
        return perPageList.isNotEmpty
            ? _buildBottomGridViewItem(context, perPageList[index])
            : Container();
      },
    );
  }

  // 底部控制区域item
  Widget _buildBottomGridViewItem(
      BuildContext context, HomeDeviceModelData regionListModel) {
    Color iconColor = regionListModel.selected == false
        ? const Color(0xffFFD638)
        : const Color(0xffDEDEDE);

    return Container(
      alignment: Alignment.center,
      child: IconTextButton(
        icon: SvgPicture.asset(
          getRightIconName(
              regionListModel.type ?? 'assets/svgs/homepage/c_ic_aircon.svg'),
          theme: SvgTheme(currentColor: iconColor, fontSize: 28.r),
        ),
        axis: Axis.vertical,
        space: 7.r,
        label: Text(regionListModel.name??'',
            textAlign: TextAlign.center,
            style: 12
                .ts
                .copyWith(color: const Color.fromRGBO(238, 238, 238, 1.0))),
        onPressed: () {
          controller.deviceCategoryAction(regionListModel);
        },
      ),
    );
  }

  String getRightIconName(String type) {
    String typeName = 'assets/svgs/homepage/c_ic_aircon.svg';
    switch (type) {
      case 'light':
        typeName = SVGImage.cIcLightingSvg;
        break;
      case 'switch':
        typeName = SVGImage.cIcSwitchSvg;
        break;
      case 'outlet':
        typeName = 'assets/svgs/homepage/c_ic_socket.svg';
        break;
      case 'curtain':
        typeName = SVGImage.cIcCurtainSvg;
        break;
      case 'media':
        typeName = 'assets/svgs/homepage/c_ic_media.svg';
        break;
      case 'audio_video':
        typeName = 'assets/svgs/homepage/c_ic_video.svg';
        break;
      case 'thermostat':
        typeName = SVGImage.cIcAirconSvg;
        break;
      case 'environment':
        typeName = 'assets/svgs/homepage/c_ic_humidifier.svg';
        break;
      case 'life':
        typeName = 'assets/svgs/homepage/c_ic_life.svg';
        break;
      case 'virtual':
        typeName = 'assets/svgs/homepage/c_ic_virtual.svg';
        break;
      case 'security':
        typeName = 'assets/svgs/homepage/c_ic_camera.svg';
        break;
    }
    return typeName;
  }
}
